<template>
<!--    用户信息页面-->
    <div class="userInfo">
<!--        顶部信息栏-->
            <div class="topInfo">
<!--                头像展示-->
                <div class="avater">
                    <img src="../assets/img/me.jpg" style="width: 100%;height: 100%;border-radius: 50%">
                </div>
<!--                基本资料展示-->
                <div class="baseInfo">
                    <div class="baseItem1">
                        <div style="height: 50%;color: #353b48;line-height: 500%"><h1>{{$store.state.edit.username}}</h1></div>
                        <div style="display: flex;justify-content: space-between;margin-top: 10px" @click="edit()">
                            <div style="border-radius: 9px;width: 35px;height: 16px;text-align: center;background-color: #dfe6e9;font-size: 5px;line-height: 16px;margin-top: 13px">lv7</div>
                            <div  style="border: 1px solid #dfe6e9;border-radius: 18px;width: 150px;height: 36px;text-align: center;line-height: 36px;">编辑个人信息</div>
                        </div>
                    </div>
                    <div class="baseItem2">
                        <div style="display: flex;height: 40%">
                            <div style="height: 100%;width: 100px;border-right: 1px solid  #dfe6e9;text-align: center;padding-top: 20px">
                               <div style="font-weight: lighter;font-size: 25px;color: #353b48 ">2</div>
                                <div>动态</div>
                            </div>
                            <div style="height: 100%;width: 100px;border-right: 1px solid  #dfe6e9;text-align: center;padding-top: 20px">
                              <div style="font-weight: lighter;font-size: 25px;color: #353b48 ">2</div>
                                <div>关注</div>
                            </div>
                            <div style="height: 100%;width: 100px;border-right: 1px solid  #dfe6e9;text-align: center;padding-top: 20px">
                                <div style="font-weight: lighter;font-size: 25px;color: #353b48 ">4987336</div>
                                <div>粉丝</div>
                            </div>
                        </div>
                        <div style="height: 60%">
                            <div style="margin:10px;font-size: 14px;"><span style="color: black;">所在地区：</span><span>{{$store.state.edit.region}}</span></div>
                            <div style="margin:10px;font-size: 14px;"><span style="color: black;font-size: 14px">社交网络：</span><span>微信</span></div>
                            <div style="margin:10px;font-size: 14px;"><span style="color: black;font-size: 14px">个人介绍：</span><span>{{$store.state.edit.introduction}}</span></div>
                        </div>
                    </div>
                </div>
            </div>

<!--        收藏歌单栏目-->
        <div style="font-size: 20px;color: black;margin-top: 20px">我收藏的歌单({{total}})</div>
        <div class="collection">
            <div class="collectionItem" v-for="(item,index) in MusicList" :key="index" @click="toPlayList(item.id)">
                <div style="width: 100%;height: 90%"><img style="width: 100%;height: 100%;border-radius: 5px;" :src="item.coverImgUrl"></div>
                <div style="color:black;margin-top: 2px">{{item.name}}</div>
            </div>
        </div>
            <div style="margin-left: 240px">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="8"
                    @current-change="handCurrentChange">
            </el-pagination>
            </div>
<!--编辑页面-->
        <el-dialog
                title="编辑个人资料"
                :visible.sync="dialogVisible"
                width="30%"
                :show-close=false>
            <el-form ref="loginForm" :model="editFrom" label-width="80px" :rules="rules" >
                <!-- 用户名 -->
                <el-form-item label="用户名"
                              prop="user">
                    <el-input v-model="editFrom.username"
                              show-word-limit></el-input>
                </el-form-item>
                <!-- 简介 -->
                <el-form-item label="简介"
                              prop="introduction"
                >
                    <el-input v-model="editFrom.introduction"
                              show-word-limit></el-input>
                </el-form-item>
                <!-- 所在地区 -->
                <el-form-item label="所在地区"
                              prop="region">
                    <el-input v-model="editFrom.region"
                              show-word-limit></el-input>
                </el-form-item>
            </el-form>


            <span slot="footer" class="dialog-footer">

    <el-button type="primary" @click="save()">保存</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    import axios from 'axios';
    export default {
        name: "userinfo",
        data(){
            return{
                MusicList:[],
                page:1,
                total:0,
                dialogVisible:false,
                editFrom: {
                    username: '',
                    introduction: '',
                    region:''
                },
                // 验证规则
                rules: {
                    user: [
                        { required: true, message:'请编辑用户名', trigger: 'blur' }
                    ],
                    introduction: [
                        { required: true, message:'请编辑个人简介',  trigger: 'blur' }
                    ],
                    region:[
                        { required: true, message:'请填写所在地区',  trigger: 'blur' }
                    ]
                }

            }
        },
        created() {
            this.getMusicList(this.page)
        },
        methods:{
            getMusicList(page){
                axios({
                    url:'https://autumnfish.cn/top/playlist/',
                    method:'get',
                    params:{
                        limit:8,
                        offset:(page-1)*10,
                        cat:'全部'
                    }
                }).then(res=>{
                    this.MusicList=res.data.playlists;
                    this.total=res.data.total;
                    console.log(res)
                },err=>{
                    console.log(err)
                })
            },
            toPlayList(id){
              this.$router.push({
                  path:'/playlist/'+id
              })
            },
            handCurrentChange(val){
                this.page=val;
                this.getMusicList(this.page)
            },
            edit(){
                this.dialogVisible=true
            },
            save(){
                if(this.editFrom.region && this.editFrom.username && this.editFrom.introduction){
                    this.$store.commit('addEdit',this.editFrom)
                    this.dialogVisible=false
                }
            }
        }
    }
</script>

<style scoped>
    .userInfo{
        width: 100%;

    }
    .topInfo{
        display: flex;
        width: 100%;
        height: 300px;

    }
    .avater{
        height: 190px;
        width: 190px;
        border-radius: 50%;
        text-align: center;
        line-height: 250px;

        margin:50px;
    }
    .collection{
        margin-top: 10px;
        width: 100%;
        height: 500px;
        border: 1px solid white;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .baseInfo{
        width: 690px;
        height: 100%;

    }
    .baseItem1{
        width: 100%;
        height: 34%;
        border-bottom: 2px solid #dfe6e9;
    }
    .baseItem2{
        width: 100%;
        height: 66%;
    }
    .collectionItem{
        width: 23%;
        height: 200px;


    }
    .collectionItem:hover{
        cursor:pointer
    }
</style>